<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>未来视界 - 探索无限可能</title>
		<!-- 引入Tailwind CSS -->
		<script src="https://cdn.tailwindcss.com"></script>
		<!-- 引入Font Awesome -->
		<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
		<!-- 引入Chart.js -->
		<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>

		<!-- 配置Tailwind自定义主题 -->
		<script>
			tailwind.config = {
				theme: {
					extend: {
						colors: {
							primary: '#3B82F6',
							secondary: '#10B981',
							accent: '#8B5CF6',
							dark: '#1E293B',
							light: '#F8FAFC'
						},
						fontFamily: {
							sans: ['Inter', 'system-ui', 'sans-serif'],
						},
					}
				}
			}
		</script>

		<!-- 自定义工具类 -->
		<style type="text/tailwindcss">
			@layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-balance {
                text-wrap: balance;
            }
            .card-hover {
                @apply transition-all duration-300 hover:shadow-xl hover:-translate-y-1;
            }
            .gradient-overlay {
                background: linear-gradient(to right, rgba(59, 130, 246, 0.9), rgba(139, 92, 246, 0.8));
            }
        }
    </style>

		<style>
			/* 基础动画 */
			@keyframes fadeIn {
				from {
					opacity: 0;
					transform: translateY(20px);
				}

				to {
					opacity: 1;
					transform: translateY(0);
				}
			}

			.animate-fade-in {
				animation: fadeIn 0.6s ease forwards;
			}

			/* 滚动条美化 */
			::-webkit-scrollbar {
				width: 8px;
			}

			::-webkit-scrollbar-track {
				background: #f1f5f9;
			}

			::-webkit-scrollbar-thumb {
				background: #94a3b8;
				border-radius: 4px;
			}

			::-webkit-scrollbar-thumb:hover {
				background: #64748b;
			}

			/* 平滑滚动 */
			html {
				scroll-behavior: smooth;
			}

			/* 导航栏滚动效果 */
			.nav-scrolled {
				@apply bg-white shadow-md py-2;
			}
		</style>
	</head>

	<body class="font-sans text-dark bg-light">
		<!-- 导航栏 -->
		<header id="navbar" class="fixed top-0 left-0 w-full z-50 transition-all duration-300 py-4">
			<div class="container mx-auto px-4 md:px-6">
				<div class="flex justify-between items-center">
					<!-- Logo -->
					<a href="#" class="flex items-center space-x-2">
						<div class="w-10 h-10 rounded-lg gradient-overlay flex items-center justify-center">
							<i class="fa fa-eye text-white text-xl"></i>
						</div>
						<span
							class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-accent">未来视界</span>
					</a>

					<!-- 桌面导航 -->
					<nav class="hidden md:flex items-center space-x-8">
						<a href="#home" class="font-medium hover:text-primary transition-colors">首页</a>
						<a href="#about" class="font-medium hover:text-primary transition-colors">关于我们</a>
						<a href="#services" class="font-medium hover:text-primary transition-colors">服务</a>
						<a href="#projects" class="font-medium hover:text-primary transition-colors">项目案例</a>
						<a href="#insights" class="font-medium hover:text-primary transition-colors">洞察</a>
						<a href="#contact"
							class="bg-primary hover:bg-primary/90 text-white px-5 py-2 rounded-lg transition-colors">
							联系我们
						</a>
					</nav>

					<!-- 移动端菜单按钮 -->
					<button id="menu-toggle" class="md:hidden text-dark text-2xl focus:outline-none">
						<i class="fa fa-bars"></i>
					</button>
				</div>
			</div>

			<!-- 移动端导航菜单 -->
			<div id="mobile-menu" class="md:hidden bg-white shadow-lg absolute w-full left-0 top-full py-4 px-6 hidden">
				<nav class="flex flex-col space-y-4">
					<a href="#home" class="font-medium py-2 hover:text-primary transition-colors">首页</a>
					<a href="#about" class="font-medium py-2 hover:text-primary transition-colors">关于我们</a>
					<a href="#services" class="font-medium py-2 hover:text-primary transition-colors">服务</a>
					<a href="#projects" class="font-medium py-2 hover:text-primary transition-colors">项目案例</a>
					<a href="#insights" class="font-medium py-2 hover:text-primary transition-colors">洞察</a>
					<a href="#contact"
						class="bg-primary hover:bg-primary/90 text-white px-5 py-2 rounded-lg transition-colors text-center">
						联系我们
					</a>
				</nav>
			</div>
		</header>

		<main>
			<!-- 英雄区域带轮播 -->
			<section id="home" class="relative h-screen overflow-hidden">
				<!-- 轮播容器 -->
				<div id="carousel" class="h-full">
					<!-- 轮播项1 -->
					<div class="carousel-item absolute inset-0 opacity-100 transition-opacity duration-1000">
						<div class="absolute inset-0 bg-dark/50 z-10"></div>
						<img src="https://picsum.photos/id/10/1920/1080" alt="未来科技" class="w-full h-full object-cover">
						<div class="absolute inset-0 z-20 flex items-center">
							<div class="container mx-auto px-4 md:px-6">
								<div class="max-w-2xl animate-fade-in">
									<span
										class="inline-block px-4 py-1 bg-primary text-white text-sm font-medium rounded-full mb-6">引领行业创新</span>
									<h1 class="text-[clamp(2.5rem,6vw,4rem)] font-bold text-white leading-tight mb-6">
										塑造未来的<br>数字体验
									</h1>
									<p class="text-white/90 text-lg md:text-xl mb-8 max-w-xl">
										我们将前沿技术与创新思维相结合，为企业打造卓越的数字解决方案，助力业务增长。
									</p>
									<div class="flex flex-col sm:flex-row gap-4">
										<a href="#services"
											class="bg-white text-primary px-8 py-3 rounded-lg hover:bg-opacity-90 transition-all text-center font-medium">
											探索服务
										</a>
										<a href="#contact"
											class="bg-transparent border-2 border-white text-white px-8 py-3 rounded-lg hover:bg-white/10 transition-all text-center font-medium">
											咨询专家
										</a>
									</div>
								</div>
							</div>
						</div>
					</div>

					<!-- 轮播项2 -->
					<div class="carousel-item absolute inset-0 opacity-0 transition-opacity duration-1000">
						<div class="absolute inset-0 bg-dark/60 z-10"></div>
						<img src="https://picsum.photos/id/20/1920/1080" alt="创新解决方案"
							class="w-full h-full object-cover">
						<div class="absolute inset-0 z-20 flex items-center">
							<div class="container mx-auto px-4 md:px-6">
								<div class="max-w-2xl animate-fade-in">
									<span
										class="inline-block px-4 py-1 bg-secondary text-white text-sm font-medium rounded-full mb-6">定制解决方案</span>
									<h1 class="text-[clamp(2.5rem,6vw,4rem)] font-bold text-white leading-tight mb-6">
										为您的业务<br>量身定制
									</h1>
									<p class="text-white/90 text-lg md:text-xl mb-8 max-w-xl">
										深入了解您的业务需求，提供个性化解决方案，帮助您在竞争激烈的市场中脱颖而出。
									</p>
									<div class="flex flex-col sm:flex-row gap-4">
										<a href="#projects"
											class="bg-white text-primary px-8 py-3 rounded-lg hover:bg-opacity-90 transition-all text-center font-medium">
											查看案例
										</a>
										<a href="#contact"
											class="bg-transparent border-2 border-white text-white px-8 py-3 rounded-lg hover:bg-white/10 transition-all text-center font-medium">
											开始合作
										</a>
									</div>
								</div>
							</div>
						</div>
					</div>

					<!-- 轮播项3 -->
					<div class="carousel-item absolute inset-0 opacity-0 transition-opacity duration-1000">
						<div class="absolute inset-0 bg-dark/50 z-10"></div>
						<img src="https://picsum.photos/id/30/1920/1080" alt="技术创新" class="w-full h-full object-cover">
						<div class="absolute inset-0 z-20 flex items-center">
							<div class="container mx-auto px-4 md:px-6">
								<div class="max-w-2xl animate-fade-in">
									<span
										class="inline-block px-4 py-1 bg-accent text-white text-sm font-medium rounded-full mb-6">技术与创意融合</span>
									<h1 class="text-[clamp(2.5rem,6vw,4rem)] font-bold text-white leading-tight mb-6">
										创新不止于<br>技术本身
									</h1>
									<p class="text-white/90 text-lg md:text-xl mb-8 max-w-xl">
										我们相信真正的创新来自技术与创意的完美结合，为客户创造独特而有价值的体验。
									</p>
									<div class="flex flex-col sm:flex-row gap-4">
										<a href="#about"
											class="bg-white text-primary px-8 py-3 rounded-lg hover:bg-opacity-90 transition-all text-center font-medium">
											关于我们
										</a>
										<a href="#contact"
											class="bg-transparent border-2 border-white text-white px-8 py-3 rounded-lg hover:bg-white/10 transition-all text-center font-medium">
											联系我们
										</a>
									</div>
								</div>
							</div>
						</div>
					</div>

					<!-- 轮播控制按钮 -->
					<div class="absolute bottom-8 left-0 right-0 z-30 flex justify-center space-x-3">
						<button class="carousel-dot w-3 h-3 rounded-full bg-white opacity-100 transition-opacity"
							data-index="0"></button>
						<button class="carousel-dot w-3 h-3 rounded-full bg-white opacity-50 transition-opacity"
							data-index="1"></button>
						<button class="carousel-dot w-3 h-3 rounded-full bg-white opacity-50 transition-opacity"
							data-index="2"></button>
					</div>
				</div>
			</section>

			<!-- 关于我们 -->
			<section id="about" class="py-20 bg-white">
				<div class="container mx-auto px-4 md:px-6">
					<div class="flex flex-col lg:flex-row items-center gap-12">
						<div class="lg:w-1/2 relative">
							<div class="relative z-10 rounded-2xl overflow-hidden shadow-xl">
								<img src="https://picsum.photos/id/40/800/600" alt="关于我们" class="w-full h-auto">
							</div>
							<div class="absolute -bottom-6 -right-6 w-40 h-40 bg-primary/10 rounded-full -z-10"></div>
							<div class="absolute -top-6 -left-6 w-24 h-24 bg-accent/10 rounded-full -z-10"></div>

							<!-- 数据卡片 -->
							<div
								class="absolute -bottom-10 -left-10 bg-white p-6 rounded-xl shadow-lg z-20 hidden md:block">
								<div class="flex items-center space-x-4">
									<div
										class="w-12 h-12 rounded-full bg-secondary/10 flex items-center justify-center">
										<i class="fa fa-trophy text-secondary text-xl"></i>
									</div>
									<div>
										<div class="text-2xl font-bold">15+</div>
										<div class="text-gray-600 text-sm">行业经验</div>
									</div>
								</div>
							</div>
						</div>

						<div class="lg:w-1/2">
							<span class="text-primary font-semibold">关于我们</span>
							<h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mt-2 mb-6">我们致力于<br>创造卓越的数字体验</h2>
							<p class="text-gray-600 mb-6">
								未来视界成立于2008年，是一家专注于数字创新的科技公司。我们的团队由来自不同领域的专业人才组成，包括设计师、开发者、 strategists和分析师。
							</p>
							<p class="text-gray-600 mb-8">
								十五年来，我们为超过500家企业提供了优质的数字解决方案，帮助他们实现业务增长和数字化转型。我们相信技术的力量，更相信创新能够改变世界。
							</p>

							<!-- 核心价值 -->
							<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
								<div class="flex items-start">
									<div
										class="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center mr-4 mt-1 flex-shrink-0">
										<i class="fa fa-lightbulb-o text-primary"></i>
									</div>
									<div>
										<h3 class="font-bold mb-2">创新思维</h3>
										<p class="text-gray-600 text-sm">不断探索新的思路和方法，为客户提供创新解决方案。</p>
									</div>
								</div>

								<div class="flex items-start">
									<div
										class="w-10 h-10 rounded-lg bg-secondary/10 flex items-center justify-center mr-4 mt-1 flex-shrink-0">
										<i class="fa fa-users text-secondary"></i>
									</div>
									<div>
										<h3 class="font-bold mb-2">客户至上</h3>
										<p class="text-gray-600 text-sm">深入理解客户需求，提供超出期望的产品和服务。</p>
									</div>
								</div>

								<div class="flex items-start">
									<div
										class="w-10 h-10 rounded-lg bg-accent/10 flex items-center justify-center mr-4 mt-1 flex-shrink-0">
										<i class="fa fa-cogs text-accent"></i>
									</div>
									<div>
										<h3 class="font-bold mb-2">卓越品质</h3>
										<p class="text-gray-600 text-sm">对每一个细节精益求精，确保交付最高品质的成果。</p>
									</div>
								</div>

								<div class="flex items-start">
									<div
										class="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center mr-4 mt-1 flex-shrink-0">
										<i class="fa fa-globe text-primary"></i>
									</div>
									<div>
										<h3 class="font-bold mb-2">全球视野</h3>
										<p class="text-gray-600 text-sm">融合全球最佳实践，为本地客户提供国际化解决方案。</p>
									</div>
								</div>
							</div>

							<a href="#contact"
								class="inline-block bg-primary hover:bg-primary/90 text-white px-8 py-3 rounded-lg transition-all font-medium">
								了解更多
							</a>
						</div>
					</div>
				</div>
			</section>

			<!-- 服务区域 -->
			<section id="services" class="py-20 bg-gray-50">
				<div class="container mx-auto px-4 md:px-6">
					<div class="text-center max-w-3xl mx-auto mb-16">
						<span class="text-primary font-semibold">我们的服务</span>
						<h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mt-2 mb-4">全方位的数字解决方案</h2>
						<p class="text-gray-600">我们提供从策略咨询到技术实施的全流程服务，满足您的各种业务需求</p>
					</div>

					<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
						<!-- 服务卡片1 -->
						<div class="bg-white rounded-xl p-8 shadow-md card-hover">
							<div class="w-14 h-14 rounded-lg bg-primary/10 flex items-center justify-center mb-6">
								<i class="fa fa-code text-primary text-2xl"></i>
							</div>
							<h3 class="text-xl font-bold mb-4">软件开发</h3>
							<p class="text-gray-600 mb-6">定制化的软件解决方案，包括企业应用、移动应用和Web系统开发，满足您的独特业务需求。</p>
							<a href="#" class="text-primary font-medium flex items-center group">
								了解详情 <i class="fa fa-arrow-right ml-2 group-hover:ml-3 transition-all"></i>
							</a>
						</div>

						<!-- 服务卡片2 -->
						<div class="bg-white rounded-xl p-8 shadow-md card-hover">
							<div class="w-14 h-14 rounded-lg bg-secondary/10 flex items-center justify-center mb-6">
								<i class="fa fa-paint-brush text-secondary text-2xl"></i>
							</div>
							<h3 class="text-xl font-bold mb-4">UI/UX设计</h3>
							<p class="text-gray-600 mb-6">打造直观、美观且用户友好的界面设计，提升用户体验和产品价值，增强品牌竞争力。</p>
							<a href="#" class="text-primary font-medium flex items-center group">
								了解详情 <i class="fa fa-arrow-right ml-2 group-hover:ml-3 transition-all"></i>
							</a>
						</div>

						<!-- 服务卡片3 -->
						<div class="bg-white rounded-xl p-8 shadow-md card-hover">
							<div class="w-14 h-14 rounded-lg bg-accent/10 flex items-center justify-center mb-6">
								<i class="fa fa-line-chart text-accent text-2xl"></i>
							</div>
							<h3 class="text-xl font-bold mb-4">数据分析</h3>
							<p class="text-gray-600 mb-6">通过先进的数据分析技术，挖掘数据价值，提供可行的业务洞察，支持数据驱动决策。</p>
							<a href="#" class="text-primary font-medium flex items-center group">
								了解详情 <i class="fa fa-arrow-right ml-2 group-hover:ml-3 transition-all"></i>
							</a>
						</div>

						<!-- 服务卡片4 -->
						<div class="bg-white rounded-xl p-8 shadow-md card-hover">
							<div class="w-14 h-14 rounded-lg bg-primary/10 flex items-center justify-center mb-6">
								<i class="fa fa-cloud text-primary text-2xl"></i>
							</div>
							<h3 class="text-xl font-bold mb-4">云计算服务</h3>
							<p class="text-gray-600 mb-6">提供云迁移、云基础设施建设和优化服务，帮助企业降低成本，提高业务灵活性。</p>
							<a href="#" class="text-primary font-medium flex items-center group">
								了解详情 <i class="fa fa-arrow-right ml-2 group-hover:ml-3 transition-all"></i>
							</a>
						</div>

						<!-- 服务卡片5 -->
						<div class="bg-white rounded-xl p-8 shadow-md card-hover">
							<div class="w-14 h-14 rounded-lg bg-secondary/10 flex items-center justify-center mb-6">
								<i class="fa fa-shield text-secondary text-2xl"></i>
							</div>
							<h3 class="text-xl font-bold mb-4">网络安全</h3>
							<p class="text-gray-600 mb-6">全方位的网络安全防护方案，保护您的系统和数据安全，防范各类网络威胁。</p>
							<a href="#" class="text-primary font-medium flex items-center group">
								了解详情 <i class="fa fa-arrow-right ml-2 group-hover:ml-3 transition-all"></i>
							</a>
						</div>

						<!-- 服务卡片6 -->
						<div class="bg-white rounded-xl p-8 shadow-md card-hover">
							<div class="w-14 h-14 rounded-lg bg-accent/10 flex items-center justify-center mb-6">
								<i class="fa fa-lightbulb-o text-accent text-2xl"></i>
							</div>
							<h3 class="text-xl font-bold mb-4">数字化转型咨询</h3>
							<p class="text-gray-600 mb-6">提供专业的数字化转型战略咨询，帮助企业制定数字化路线图，实现业务创新。</p>
							<a href="#" class="text-primary font-medium flex items-center group">
								了解详情 <i class="fa fa-arrow-right ml-2 group-hover:ml-3 transition-all"></i>
							</a>
						</div>
					</div>
				</div>
			</section>

			<!-- 数据统计与图表 -->
			<section class="py-20 bg-white">
				<div class="container mx-auto px-4 md:px-6">
					<div class="text-center max-w-3xl mx-auto mb-16">
						<span class="text-primary font-semibold">我们的成就</span>
						<h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mt-2 mb-4">用数据说话</h2>
						<p class="text-gray-600">多年来，我们积累了丰富的经验和成果，为客户创造了实实在在的价值</p>
					</div>

					<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
						<!-- 数据卡片 -->
						<div class="grid grid-cols-2 gap-6">
							<div class="bg-gray-50 rounded-xl p-6 text-center card-hover">
								<div class="text-4xl font-bold text-primary mb-2 counter" data-target="500">0</div>
								<p class="text-gray-600">成功案例</p>
							</div>

							<div class="bg-gray-50 rounded-xl p-6 text-center card-hover">
								<div class="text-4xl font-bold text-secondary mb-2 counter" data-target="15">0</div>
								<p class="text-gray-600">行业经验</p>
							</div>

							<div class="bg-gray-50 rounded-xl p-6 text-center card-hover">
								<div class="text-4xl font-bold text-accent mb-2 counter" data-target="98">0</div>
								<p class="text-gray-600">客户满意度</p>
							</div>

							<div class="bg-gray-50 rounded-xl p-6 text-center card-hover">
								<div class="text-4xl font-bold text-primary mb-2 counter" data-target="120">0</div>
								<p class="text-gray-600">专业团队</p>
							</div>
						</div>

						<!-- 图表 -->
						<div class="bg-gray-50 rounded-xl p-6">
							<h3 class="text-xl font-bold mb-6">业务增长趋势</h3>
							<div class="h-80">
								<canvas id="growthChart"></canvas>
							</div>
						</div>
					</div>
				</div>
			</section>

			<!-- 项目案例 -->
			<section id="projects" class="py-20 bg-gray-50">
				<div class="container mx-auto px-4 md:px-6">
					<div class="text-center max-w-3xl mx-auto mb-16">
						<span class="text-primary font-semibold">项目案例</span>
						<h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mt-2 mb-4">我们的精选作品</h2>
						<p class="text-gray-600">探索我们为各行业客户打造的成功案例，了解我们如何帮助他们实现业务目标</p>
					</div>

					<!-- 案例筛选 -->
					<div class="flex flex-wrap justify-center gap-4 mb-12">
						<button class="project-filter active px-5 py-2 rounded-full bg-primary text-white font-medium"
							data-filter="all">全部</button>
						<button
							class="project-filter px-5 py-2 rounded-full bg-gray-200 hover:bg-gray-300 transition-colors font-medium"
							data-filter="software">软件开发</button>
						<button
							class="project-filter px-5 py-2 rounded-full bg-gray-200 hover:bg-gray-300 transition-colors font-medium"
							data-filter="design">设计项目</button>
						<button
							class="project-filter px-5 py-2 rounded-full bg-gray-200 hover:bg-gray-300 transition-colors font-medium"
							data-filter="data">数据分析</button>
						<button
							class="project-filter px-5 py-2 rounded-full bg-gray-200 hover:bg-gray-300 transition-colors font-medium"
							data-filter="cloud">云计算</button>
					</div>

					<!-- 案例网格 -->
					<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
						<!-- 案例1 -->
						<div class="project-item group" data-category="software">
							<div class="relative overflow-hidden rounded-xl">
								<img src="https://picsum.photos/id/50/600/400" alt="企业管理系统"
									class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110">
								<div
									class="absolute inset-0 bg-gradient-to-t from-dark/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-6">
									<h3 class="text-white text-xl font-bold">企业资源管理系统</h3>
									<p class="text-white/80 text-sm mt-2">为制造业客户开发的全流程管理系统，提升运营效率30%</p>
									<a href="#"
										class="mt-4 inline-block text-white border-b border-white/50 hover:border-white transition-colors">查看详情</a>
								</div>
							</div>
						</div>

						<!-- 案例2 -->
						<div class="project-item group" data-category="design">
							<div class="relative overflow-hidden rounded-xl">
								<img src="https://picsum.photos/id/60/600/400" alt="移动应用设计"
									class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110">
								<div
									class="absolute inset-0 bg-gradient-to-t from-dark/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-6">
									<h3 class="text-white text-xl font-bold">健康管理APP设计</h3>
									<p class="text-white/80 text-sm mt-2">为医疗健康企业设计的用户友好型移动应用，下载量超100万</p>
									<a href="#"
										class="mt-4 inline-block text-white border-b border-white/50 hover:border-white transition-colors">查看详情</a>
								</div>
							</div>
						</div>

						<!-- 案例3 -->
						<div class="project-item group" data-category="data">
							<div class="relative overflow-hidden rounded-xl">
								<img src="https://picsum.photos/id/70/600/400" alt="数据分析平台"
									class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110">
								<div
									class="absolute inset-0 bg-gradient-to-t from-dark/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-6">
									<h3 class="text-white text-xl font-bold">零售数据分析平台</h3>
									<p class="text-white/80 text-sm mt-2">为连锁零售企业打造的数据分析平台，提升销售额15%</p>
									<a href="#"
										class="mt-4 inline-block text-white border-b border-white/50 hover:border-white transition-colors">查看详情</a>
								</div>
							</div>
						</div>

						<!-- 案例4 -->
						<div class="project-item group" data-category="cloud">
							<div class="relative overflow-hidden rounded-xl">
								<img src="https://picsum.photos/id/80/600/400" alt="云迁移项目"
									class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110">
								<div
									class="absolute inset-0 bg-gradient-to-t from-dark/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-6">
									<h3 class="text-white text-xl font-bold">金融系统云迁移</h3>
									<p class="text-white/80 text-sm mt-2">为银行客户完成核心系统云迁移，降低成本40%，提升稳定性</p>
									<a href="#"
										class="mt-4 inline-block text-white border-b border-white/50 hover:border-white transition-colors">查看详情</a>
								</div>
							</div>
						</div>

						<!-- 案例5 -->
						<div class="project-item group" data-category="software">
							<div class="relative overflow-hidden rounded-xl">
								<img src="https://picsum.photos/id/90/600/400" alt="电商平台"
									class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110">
								<div
									class="absolute inset-0 bg-gradient-to-t from-dark/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-6">
									<h3 class="text-white text-xl font-bold">全渠道电商平台</h3>
									<p class="text-white/80 text-sm mt-2">为时尚品牌打造的全渠道销售平台，整合线上线下业务</p>
									<a href="#"
										class="mt-4 inline-block text-white border-b border-white/50 hover:border-white transition-colors">查看详情</a>
								</div>
							</div>
						</div>

						<!-- 案例6 -->
						<div class="project-item group" data-category="design">
							<div class="relative overflow-hidden rounded-xl">
								<img src="https://picsum.photos/id/100/600/400" alt="网站重设计"
									class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110">
								<div
									class="absolute inset-0 bg-gradient-to-t from-dark/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-6">
									<h3 class="text-white text-xl font-bold">教育平台重设计</h3>
									<p class="text-white/80 text-sm mt-2">为在线教育机构进行的平台重设计，提升用户留存率25%</p>
									<a href="#"
										class="mt-4 inline-block text-white border-b border-white/50 hover:border-white transition-colors">查看详情</a>
								</div>
							</div>
						</div>
					</div>

					<div class="text-center mt-12">
						<a href="#"
							class="inline-block bg-primary hover:bg-primary/90 text-white px-8 py-3 rounded-lg transition-all font-medium">
							查看更多案例
						</a>
					</div>
				</div>
			</section>

			<!-- 行业洞察 -->
			<section id="insights" class="py-20 bg-white">
				<div class="container mx-auto px-4 md:px-6">
					<div class="text-center max-w-3xl mx-auto mb-16">
						<span class="text-primary font-semibold">行业洞察</span>
						<h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mt-2 mb-4">最新动态与见解</h2>
						<p class="text-gray-600">了解数字领域的最新趋势、技术发展和行业见解，把握未来发展方向</p>
					</div>

					<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
						<!-- 文章1 -->
						<article class="bg-gray-50 rounded-xl overflow-hidden shadow-sm card-hover">
							<img src="https://picsum.photos/id/110/600/400" alt="AI发展趋势"
								class="w-full h-48 object-cover">
							<div class="p-6">
								<div class="flex items-center text-sm text-gray-500 mb-4">
									<span class="flex items-center"><i class="fa fa-calendar-o mr-2"></i>
										2023-06-15</span>
									<span class="mx-3">•</span>
									<span class="flex items-center"><i class="fa fa-user-o mr-2"></i> 张明</span>
								</div>
								<h3 class="text-xl font-bold mb-3">人工智能在企业应用中的五大趋势</h3>
								<p class="text-gray-600 mb-4 line-clamp-3">探索人工智能技术在企业中的最新应用趋势，以及如何利用AI提升业务效率和竞争力...</p>
								<a href="#" class="text-primary font-medium flex items-center group">
									阅读全文 <i class="fa fa-arrow-right ml-2 group-hover:ml-3 transition-all"></i>
								</a>
							</div>
						</article>

						<!-- 文章2 -->
						<article class="bg-gray-50 rounded-xl overflow-hidden shadow-sm card-hover">
							<img src="https://picsum.photos/id/120/600/400" alt="数字化转型"
								class="w-full h-48 object-cover">
							<div class="p-6">
								<div class="flex items-center text-sm text-gray-500 mb-4">
									<span class="flex items-center"><i class="fa fa-calendar-o mr-2"></i>
										2023-05-28</span>
									<span class="mx-3">•</span>
									<span class="flex items-center"><i class="fa fa-user-o mr-2"></i> 李华</span>
								</div>
								<h3 class="text-xl font-bold mb-3">中小企业数字化转型的实用指南</h3>
								<p class="text-gray-600 mb-4 line-clamp-3">针对中小企业的特点和需求，提供切实可行的数字化转型路径和方法，降低转型风险...</p>
								<a href="#" class="text-primary font-medium flex items-center group">
									阅读全文 <i class="fa fa-arrow-right ml-2 group-hover:ml-3 transition-all"></i>
								</a>
							</div>
						</article>

						<!-- 文章3 -->
						<article class="bg-gray-50 rounded-xl overflow-hidden shadow-sm card-hover">
							<img src="https://picsum.photos/id/130/600/400" alt="数据安全" class="w-full h-48 object-cover">
							<div class="p-6">
								<div class="flex items-center text-sm text-gray-500 mb-4">
									<span class="flex items-center"><i class="fa fa-calendar-o mr-2"></i>
										2023-05-10</span>
									<span class="mx-3">•</span>
									<span class="flex items-center"><i class="fa fa-user-o mr-2"></i> 王强</span>
								</div>
								<h3 class="text-xl font-bold mb-3">零信任架构：企业网络安全的新范式</h3>
								<p class="text-gray-600 mb-4 line-clamp-3">解析零信任安全架构的核心思想和实施方法，帮助企业构建更强大的网络安全防线...</p>
								<a href="#" class="text-primary font-medium flex items-center group">
									阅读全文 <i class="fa fa-arrow-right ml-2 group-hover:ml-3 transition-all"></i>
								</a>
							</div>
						</article>
					</div>

					<div class="text-center mt-12">
						<a href="#"
							class="inline-block border-2 border-primary text-primary hover:bg-primary hover:text-white px-8 py-3 rounded-lg transition-all font-medium">
							浏览所有文章
						</a>
					</div>
				</div>
			</section>

			<!-- 客户评价 -->
			<section class="py-20 bg-gray-50">
				<div class="container mx-auto px-4 md:px-6">
					<div class="text-center max-w-3xl mx-auto mb-16">
						<span class="text-primary font-semibold">客户评价</span>
						<h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mt-2 mb-4">客户对我们的评价</h2>
						<p class="text-gray-600">听听我们的客户怎么说，他们的成功是我们最大的动力</p>
					</div>

					<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
						<!-- 评价1 -->
						<div class="bg-white p-8 rounded-xl shadow-sm card-hover">
							<div class="text-yellow-400 mb-6">
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
							</div>
							<p class="text-gray-600 mb-6 italic">
								"未来视界为我们开发的企业管理系统彻底改变了我们的运营方式，效率提升了30%以上。他们的专业团队不仅技术过硬，而且非常理解我们的业务需求。"
							</p>
							<div class="flex items-center">
								<img src="https://picsum.photos/id/1012/100/100" alt="客户头像"
									class="w-12 h-12 rounded-full mr-4">
								<div>
									<h4 class="font-bold">陈总</h4>
									<p class="text-gray-500 text-sm">某制造企业 CEO</p>
								</div>
							</div>
						</div>

						<!-- 评价2 -->
						<div class="bg-white p-8 rounded-xl shadow-sm card-hover">
							<div class="text-yellow-400 mb-6">
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
							</div>
							<p class="text-gray-600 mb-6 italic">
								"与未来视界合作的数字化转型项目非常成功，他们不仅提供了技术解决方案，还帮助我们重塑了业务流程。数据分析平台让我们能够做出更明智的决策。"
							</p>
							<div class="flex items-center">
								<img src="https://picsum.photos/id/1027/100/100" alt="客户头像"
									class="w-12 h-12 rounded-full mr-4">
								<div>
									<h4 class="font-bold">林经理</h4>
									<p class="text-gray-500 text-sm">某零售企业 运营总监</p>
								</div>
							</div>
						</div>

						<!-- 评价3 -->
						<div class="bg-white p-8 rounded-xl shadow-sm card-hover">
							<div class="text-yellow-400 mb-6">
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star-half-o"></i>
							</div>
							<p class="text-gray-600 mb-6 italic">
								"未来视界设计的移动应用获得了用户的广泛好评，下载量远超预期。他们的设计团队非常注重用户体验，每一个细节都考虑得很周到。"
							</p>
							<div class="flex items-center">
								<img src="https://picsum.photos/id/1025/100/100" alt="客户头像"
									class="w-12 h-12 rounded-full mr-4">
								<div>
									<h4 class="font-bold">赵总</h4>
									<p class="text-gray-500 text-sm">某科技创业公司 创始人</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</section>

			<!-- CTA区域 -->
			<section class="py-20 gradient-overlay text-white">
				<div class="container mx-auto px-4 md:px-6 text-center">
					<h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mb-6">准备好开始您的数字化之旅了吗？</h2>
					<p class="text-white/80 text-lg max-w-2xl mx-auto mb-10">
						无论您是需要全新的解决方案，还是想优化现有系统，我们都能为您提供专业支持
					</p>
					<div class="flex flex-col sm:flex-row justify-center gap-4">
						<a href="#contact"
							class="bg-white text-primary px-8 py-3 rounded-lg hover:bg-opacity-90 transition-all text-center font-medium">
							立即咨询
						</a>
						<a href="#services"
							class="bg-transparent border-2 border-white text-white px-8 py-3 rounded-lg hover:bg-white/10 transition-all text-center font-medium">
							了解服务
						</a>
					</div>
				</div>
			</section>

			<!-- 联系我们 -->
			<section id="contact" class="py-20 bg-white">
				<div class="container mx-auto px-4 md:px-6">
					<div class="text-center max-w-3xl mx-auto mb-16">
						<span class="text-primary font-semibold">联系我们</span>
						<h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mt-2 mb-4">与我们取得联系</h2>
						<p class="text-gray-600">无论您有任何问题或需求，我们的团队都将竭诚为您提供帮助</p>
					</div>

					<div class="grid grid-cols-1 lg:grid-cols-5 gap-8">
						<div class="lg:col-span-2">
							<div class="bg-gray-50 rounded-xl p-8 h-full">
								<h3 class="text-xl font-bold mb-6">联系方式</h3>

								<div class="space-y-6 mb-8">
									<div class="flex items-start">
										<div
											class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mr-4 flex-shrink-0">
											<i class="fa fa-map-marker text-primary"></i>
										</div>
										<div>
											<h4 class="font-bold mb-1">公司地址</h4>
											<p class="text-gray-600">上海市浦东新区张江高科技园区科苑路88号</p>
										</div>
									</div>

									<div class="flex items-start">
										<div
											class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mr-4 flex-shrink-0">
											<i class="fa fa-phone text-primary"></i>
										</div>
										<div>
											<h4 class="font-bold mb-1">联系电话</h4>
											<p class="text-gray-600">400-888-9999</p>
										</div>
									</div>

									<div class="flex items-start">
										<div
											class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mr-4 flex-shrink-0">
											<i class="fa fa-envelope text-primary"></i>
										</div>
										<div>
											<h4 class="font-bold mb-1">电子邮箱</h4>
											<p class="text-gray-600">info@futurevision.com</p>
										</div>
									</div>

									<div class="flex items-start">
										<div
											class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mr-4 flex-shrink-0">
											<i class="fa fa-clock-o text-primary"></i>
										</div>
										<div>
											<h4 class="font-bold mb-1">工作时间</h4>
											<p class="text-gray-600">周一至周五: 9:00 - 18:00</p>
										</div>
									</div>
								</div>

								<div>
									<h4 class="font-bold mb-4">关注我们</h4>
									<div class="flex space-x-4">
										<a href="#"
											class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-colors">
											<i class="fa fa-weixin"></i>
										</a>
										<a href="#"
											class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-colors">
											<i class="fa fa-weibo"></i>
										</a>
										<a href="#"
											class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-colors">
											<i class="fa fa-linkedin"></i>
										</a>
										<a href="#"
											class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-colors">
											<i class="fa fa-github"></i>
										</a>
									</div>
								</div>
							</div>
						</div>

						<div class="lg:col-span-3">
							<div class="bg-gray-50 rounded-xl p-8">
								<h3 class="text-xl font-bold mb-6">发送消息</h3>
								<form id="contact-form">
									<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
										<div>
											<label for="contact-name"
												class="block text-gray-700 font-medium mb-2">姓名</label>
											<input type="text" id="contact-name"
												class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors"
												placeholder="请输入您的姓名">
										</div>
										<div>
											<label for="contact-email"
												class="block text-gray-700 font-medium mb-2">邮箱</label>
											<input type="email" id="contact-email"
												class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors"
												placeholder="请输入您的邮箱">
										</div>
									</div>

									<div class="mb-6">
										<label for="contact-subject"
											class="block text-gray-700 font-medium mb-2">主题</label>
										<input type="text" id="contact-subject"
											class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors"
											placeholder="请输入消息主题">
									</div>

									<div class="mb-6">
										<label for="contact-message"
											class="block text-gray-700 font-medium mb-2">消息内容</label>
										<textarea id="contact-message" rows="5"
											class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors"
											placeholder="请详细描述您的需求或问题"></textarea>
									</div>

									<button type="submit"
										class="bg-primary hover:bg-primary/90 text-white px-8 py-3 rounded-lg transition-all font-medium">
										发送消息
									</button>
								</form>
							</div>
						</div>
					</div>
				</div>
			</section>
		</main>

		<!-- 页脚 -->
		<footer class="bg-dark text-white pt-16 pb-8">
			<div class="container mx-auto px-4 md:px-6">
				<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10 mb-16">
					<div>
						<a href="#" class="flex items-center space-x-2 mb-6">
							<div class="w-10 h-10 rounded-lg gradient-overlay flex items-center justify-center">
								<i class="fa fa-eye text-white text-xl"></i>
							</div>
							<span class="text-xl font-bold text-white">未来视界</span>
						</a>
						<p class="text-gray-400 mb-6">
							我们致力于为企业提供创新的数字解决方案，助力企业数字化转型和可持续发展。
						</p>
						<div class="flex space-x-4">
							<a href="#" class="text-gray-400 hover:text-white transition-colors">
								<i class="fa fa-weixin"></i>
							</a>
							<a href="#" class="text-gray-400 hover:text-white transition-colors">
								<i class="fa fa-weibo"></i>
							</a>
							<a href="#" class="text-gray-400 hover:text-white transition-colors">
								<i class="fa fa-linkedin"></i>
							</a>
							<a href="#" class="text-gray-400 hover:text-white transition-colors">
								<i class="fa fa-github"></i>
							</a>
						</div>
					</div>

					<div>
						<h4 class="text-lg font-bold mb-6">快速链接</h4>
						<ul class="space-y-3">
							<li><a href="#home" class="text-gray-400 hover:text-white transition-colors">首页</a></li>
							<li><a href="#about" class="text-gray-400 hover:text-white transition-colors">关于我们</a></li>
							<li><a href="#services" class="text-gray-400 hover:text-white transition-colors">服务</a></li>
							<li><a href="#projects" class="text-gray-400 hover:text-white transition-colors">项目案例</a>
							</li>
							<li><a href="#insights" class="text-gray-400 hover:text-white transition-colors">行业洞察</a>
							</li>
							<li><a href="#contact" class="text-gray-400 hover:text-white transition-colors">联系我们</a>
							</li>
						</ul>
					</div>

					<div>
						<h4 class="text-lg font-bold mb-6">服务</h4>
						<ul class="space-y-3">
							<li><a href="#" class="text-gray-400 hover:text-white transition-colors">软件开发</a></li>
							<li><a href="#" class="text-gray-400 hover:text-white transition-colors">UI/UX设计</a></li>
							<li><a href="#" class="text-gray-400 hover:text-white transition-colors">数据分析</a></li>
							<li><a href="#" class="text-gray-400 hover:text-white transition-colors">云计算服务</a></li>
							<li><a href="#" class="text-gray-400 hover:text-white transition-colors">网络安全</a></li>
							<li><a href="#" class="text-gray-400 hover:text-white transition-colors">数字化转型咨询</a></li>
						</ul>
					</div>

					<div>
						<h4 class="text-lg font-bold mb-6">订阅资讯</h4>
						<p class="text-gray-400 mb-4">订阅我们的资讯，获取最新的行业动态和技术见解</p>
						<form class="mb-4">
							<div class="flex">
								<input type="email" placeholder="您的邮箱地址"
									class="px-4 py-2 rounded-l-lg w-full focus:outline-none text-dark">
								<button type="submit"
									class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-r-lg transition-colors">
									<i class="fa fa-paper-plane"></i>
								</button>
							</div>
						</form>
						<p class="text-gray-500 text-sm">我们尊重您的隐私，不会向第三方分享您的信息</p>
					</div>
				</div>

				<div class="border-t border-gray-800 pt-8">
					<div class="flex flex-col md:flex-row justify-between items-center">
						<div class="flex flex-col md:flex-row justify-between items-center">
							<p class="text-gray-500 text-sm mb-4 md:mb-0">© 2023 未来视界科技有限公司. 保留所有权利.</p>
							<div class="flex flex-wrap justify-center gap-x-6 gap-y-2">
								<a href="#" class="text-gray-500 hover:text-white text-sm transition-colors">隐私政策</a>
								<a href="#" class="text-gray-500 hover:text-white text-sm transition-colors">服务条款</a>
								<a href="#"
									class="text-gray-500 hover:text-white text-sm transition-colors">Cookie政策</a>
								<a href="#" class="text-gray-500 hover:text-white text-sm transition-colors">网站地图</a>
							</div>
						</div>
					</div>
				</div>
		</footer>

		<!-- 返回顶部按钮 -->
		<button id="back-to-top"
			class="fixed bottom-6 right-6 bg-primary text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg opacity-0 invisible transition-all z-50">
			<i class="fa fa-arrow-up"></i>
		</button>

		<!-- JavaScript -->
		<script>
			// 导航栏滚动效果
			const navbar = document.getElementById('navbar');
			const backToTop = document.getElementById('back-to-top');

			window.addEventListener('scroll', function() {
				if (window.scrollY > 100) {
					navbar.classList.add('nav-scrolled');
					backToTop.classList.remove('opacity-0', 'invisible');
					backToTop.classList.add('opacity-100', 'visible');
				} else {
					navbar.classList.remove('nav-scrolled');
					backToTop.classList.add('opacity-0', 'invisible');
					backToTop.classList.remove('opacity-100', 'visible');
				}
			});

			// 移动端菜单切换
			const menuToggle = document.getElementById('menu-toggle');
			const mobileMenu = document.getElementById('mobile-menu');

			menuToggle.addEventListener('click', function() {
				mobileMenu.classList.toggle('hidden');
				if (mobileMenu.classList.contains('hidden')) {
					menuToggle.innerHTML = '<i class="fa fa-bars"></i>';
				} else {
					menuToggle.innerHTML = '<i class="fa fa-times"></i>';
				}
			});

			// 点击移动菜单项后关闭菜单
			const mobileMenuItems = mobileMenu.querySelectorAll('a');
			mobileMenuItems.forEach(item => {
				item.addEventListener('click', function() {
					mobileMenu.classList.add('hidden');
					menuToggle.innerHTML = '<i class="fa fa-bars"></i>';
				});
			});

			// 返回顶部功能
			backToTop.addEventListener('click', function() {
				window.scrollTo({
					top: 0,
					behavior: 'smooth'
				});
			});

			// 轮播功能
			let currentSlide = 0;
			const slides = document.querySelectorAll('.carousel-item');
			const dots = document.querySelectorAll('.carousel-dot');
			const totalSlides = slides.length;

			function showSlide(index) {
				// 隐藏所有幻灯片
				slides.forEach(slide => {
					slide.classList.add('opacity-0');
					slide.classList.remove('opacity-100');
				});

				// 重置所有指示点
				dots.forEach(dot => {
					dot.classList.remove('opacity-100');
					dot.classList.add('opacity-50');
				});

				// 显示当前幻灯片和激活当前指示点
				slides[index].classList.remove('opacity-0');
				slides[index].classList.add('opacity-100');
				dots[index].classList.remove('opacity-50');
				dots[index].classList.add('opacity-100');
			}

			function nextSlide() {
				currentSlide = (currentSlide + 1) % totalSlides;
				showSlide(currentSlide);
			}

			// 设置自动轮播
			let slideInterval = setInterval(nextSlide, 5000);

			// 点击指示点切换幻灯片
			dots.forEach(dot => {
				dot.addEventListener('click', function() {
					// 清除自动轮播计时器
					clearInterval(slideInterval);
					currentSlide = parseInt(this.getAttribute('data-index'));
					showSlide(currentSlide);
					// 重新设置自动轮播
					slideInterval = setInterval(nextSlide, 5000);
				});
			});

			// 数字计数动画
			function animateCounters() {
				const counters = document.querySelectorAll('.counter');
				const speed = 200; // 动画速度

				counters.forEach(counter => {
					const target = +counter.getAttribute('data-target');
					const count = +counter.innerText;

					// 计算每次递增的值
					const inc = target / speed;

					// 如果计数小于目标值，则继续递增
					if (count < target) {
						counter.innerText = Math.ceil(count + inc);
						setTimeout(animateCounters, 1);
					} else {
						counter.innerText = target + (target === 98 ? '%' : '+');
					}
				});
			}

			// 监听元素是否进入视口
			const observerOptions = {
				threshold: 0.1
			};

			const counterObserver = new IntersectionObserver((entries) => {
				entries.forEach(entry => {
					if (entry.isIntersecting) {
						animateCounters();
						counterObserver.unobserve(entry.target);
					}
				});
			}, observerOptions);

			// 观察计数器容器
			const counterContainer = document.querySelector('.counter').parentElement.parentElement.parentElement;
			counterObserver.observe(counterContainer);

			// 初始化增长趋势图表
			const ctx = document.getElementById('growthChart').getContext('2d');
			const growthChart = new Chart(ctx, {
				type: 'line',
				data: {
					labels: ['2018', '2019', '2020', '2021', '2022', '2023'],
					datasets: [{
						label: '项目数量',
						data: [35, 62, 88, 125, 180, 245],
						borderColor: '#3B82F6',
						backgroundColor: 'rgba(59, 130, 246, 0.1)',
						tension: 0.4,
						fill: true
					}, {
						label: '客户数量',
						data: [28, 45, 68, 95, 130, 175],
						borderColor: '#10B981',
						backgroundColor: 'rgba(16, 185, 129, 0.1)',
						tension: 0.4,
						fill: true
					}]
				},
				options: {
					responsive: true,
					maintainAspectRatio: false,
					plugins: {
						legend: {
							position: 'top',
						}
					},
					scales: {
						y: {
							beginAtZero: true
						}
					}
				}
			});

			// 项目筛选功能
			const filterButtons = document.querySelectorAll('.project-filter');
			const projectItems = document.querySelectorAll('.project-item');

			filterButtons.forEach(button => {
				button.addEventListener('click', function() {
					// 更新按钮状态
					filterButtons.forEach(btn => {
						btn.classList.remove('active', 'bg-primary', 'text-white');
						btn.classList.add('bg-gray-200');
					});
					this.classList.add('active', 'bg-primary', 'text-white');
					this.classList.remove('bg-gray-200');

					const filter = this.getAttribute('data-filter');

					// 筛选项目
					projectItems.forEach(item => {
						if (filter === 'all' || item.getAttribute('data-category') === filter) {
							item.style.display = 'block';
						} else {
							item.style.display = 'none';
						}
					});
				});
			});

			// 表单提交处理
			const contactForm = document.getElementById('contact-form');
			if (contactForm) {
				contactForm.addEventListener('submit', function(e) {
					e.preventDefault();
					// 这里可以添加表单验证和提交逻辑
					alert('感谢您的留言，我们会尽快与您联系！');
					contactForm.reset();
				});
			}

			// 页面加载完成后的动画
			window.addEventListener('load', function() {
				// 添加页面加载完成的动画类
				document.body.classList.add('page-loaded');
			});
		</script>
	</body>
</html>